<template>
  <div class="dashboard-container">
    <div class="app-container">
      <PageTools :show-before="true">
        <span slot="before">共166条记录</span>
        <template slot="after">
          <el-button size="small" type="warning" @click="$router.push('/import')">导入</el-button>
          <el-button size="small" type="danger" @click="exporjson2excel">导出</el-button>
          <el-button v-if="checkPermission('addEmployee')" size="small" type="primary" @click="isShowDialog=true">新增员工</el-button>
        </template>
      </PageTools>
      <!-- 放置表格和分页 -->
      <el-card>
        <el-table border :data="employeeList">
          <el-table-column label="序号" sortable="" type="index" />
          <el-table-column label="头像" sortable="" type="index" width="200">
            <template #default="obj">
              <img v-imgerr="require('@/assets/common/bigUserHeader.png')" class="clx" :src="obj.row.staffPhoto" alt="">
            </template>
          </el-table-column>
          <el-table-column label="姓名" sortable="" prop="username" />
          <el-table-column label="工号" sortable="" prop="workNumber" />
          <el-table-column label="聘用形式" sortable="" prop="formOfEmployment" :formatter="Formatter" />
          <el-table-column label="部门" sortable="" prop="departmentName" />
          <el-table-column label="入职时间" sortable="" prop="timeOfEntry">
            <template #default="obj">
              <!-- {{ row.correctionTime | formatDate }}   上面解构row ,就可以这样写 -->
              {{ obj.row.correctionTime | formatDate }}
            </template>
          </el-table-column>
          <el-table-column label="账号状态" sortable="" prop="enableState">
            <template #default="obj">
              <el-switch v-model="obj.row.enableState" :active-value="1" :inactive-value="0" disabled />
              <!-- {{ obj.row.enableState }} -->
            </template>
          </el-table-column>
          <el-table-column label="操作" sortable="" fixed="right" width="280">
            <template #default="obj">
              <!-- {{ obj.row.id }}   拿到每一条数据删除按钮的id了,把id传给点击事件 -->
              <!-- 给路径带上我们的id，这样就可以实现，当我们点击什么数据，里面就展示什么数据，但是路由哪里记得拼接id -->
              <el-button type="text" size="small" @click="$router.push(`/employees/detail${obj.row.id}`)">查看</el-button>
              <el-button type="text" size="small">转正</el-button>
              <el-button type="text" size="small">调岗</el-button>
              <el-button type="text" size="small">离职</el-button>
              <el-button type="text" size="small" @click="isshowRoleD(obj.row.id)">角色</el-button>
              <el-button type="text" size="small" @click="Deletestaff(obj.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <el-row type="flex" justify="center" align="middle" style="height: 60px">
          <!-- :total="total"  总数多少条 -->
          <!-- :page-size="pageSetting.size"   每页多少条 -->
          <!-- @current-change="currentchange"   页码改变时会触发 -->
          <el-pagination layout="prev, pager, next" :page-size="pageSetting.size" :total="total" @current-change="currentchange" />
        </el-row>
      </el-card>
      <addwindow :show-dialog="isShowDialog" />
      <!-- 角色弹窗 -->
      <assigeRole ref="assigeRole" :isshow-role-dialog.sync="isshowRoleDialog" :user-id="userId" />
    </div>
  </div>
</template>

<script>
// 引入员工列表接口
import { getEmployee, delEmployee } from '../../api/employees'
// 引入枚举数据
import Enumeration from '../../api/constant/employees'
// 引入导出库
import { export_json_to_excel } from '../../vendor/Export2Excel'

import { formatDate } from '../../filters/index'
// 引入弹窗
import addwindow from './components/addwindow.vue'
// 引入角色弹窗
import assigeRole from './components/assigeRole.vue'
export default {
  components: {
    addwindow,
    assigeRole
  },
  data() {
    return {
      pageSetting: {
        page: 1, // 页码
        size: 5 // 	每页条数
      },
      employeeList: [], // 所有数据
      total: 0, // 代表有多少条数据
      isShowDialog: false, // 新增弹窗
      isshowRoleDialog: false, // 角色弹窗
      userId: ''
    }
  },
  created() {
    this.getEmployee()
  },
  methods: {
    // 点击弹出角色弹窗
    async  isshowRoleD(id) {
      // 子组件的接口需要id值,使用ref拿到子组件的事件,把id传给子组件
      await this.$refs.assigeRole.getuserinfoList(id)
      this.isshowRoleDialog = true
      this.userId = id
    },
    // 删除功能
    async Deletestaff(id) {
      // 二次询问
      await this.$confirm(this.$t('confirmDel')) // 这里使用了$t进行翻译，切记vue文件，前面记得加上 this
      // 发起请求
      await delEmployee(id)
      // 提示用户
      this.$message.success('删除成功')
      // 刷新数据
      this.getEmployee()
    },
    // 获取员工列表接口
    async getEmployee() {
      const { rows, total } = await getEmployee(this.pageSetting)
      this.employeeList = rows.map(item => {
        // 定义一个向上取整的随机小数
        const enableState = Math.round(Math.random())
        console.log(86, enableState)
        return {
          // 返回一个对象
          ...item,
          // 短路运算,如果后台有数据,就使用后台的,没有的话,就使用我们造的随机数
          enableState: item.enableState || enableState
        }
      })
      this.total = total
    },
    // 组件库的方法,可以接收一个参数
    // newPage这个参数就是,当我点击别的页码,他就指向那个页码.点1就指向1.点二将指向二
    currentchange(newPage) {
    // 所以我们这里要重新给页面赋值,就能控制了
      this.pageSetting.page = newPage
      // 刷新页面
      this.getEmployee()
    },
    // 组件库的方法,可以接收四个参数
    Formatter(row, column, cellValue, index) {
      // // 可以使用判断 cellValue等于1的时候就是正式工
      // if (cellValue === 1) {
      //   return '正式工'
      // }
      // if (cellValue === 2) {
      //   return '零时工'
      // }

      const obj = Enumeration.hireType.find(item => item.id === cellValue)
      return obj ? obj.value : '未知'
    },
    async exporjson2excel() {
      // 所以数据
      const { rows } = await getEmployee({
        page: 1,
        size: this.total
      })
      console.log(103, rows)

      const header = ['姓名', '工号', '聘用形式', '入职日期', '转正日期']

      const data = rows.map(user => {
        return this.objToArr(user)
      })

      // 数组逃对象
      console.log(114, rows)
      // 以及被改成数组套数组了
      console.log(115, data)
      // 生成 excel 文件的方法
      export_json_to_excel({
        header,
        data
      })
    },
    objToArr(objuser) {
      const arruser = []
      // 中间转换
      const zidian = {
        '姓名': 'username',
        '工号': 'workNumber',
        '聘用形式': 'formOfEmployment',
        '入职日期': 'timeOfEntry',
        '转正日期': 'correctionTime'
      }
      for (const key in zidian) {
        // console.log(135, key) // key 就是所有的键名,姓名工号等等
        // 用一个变量保存所有的key,对象拿里面的key,以对象命名[key],这样就拿到了所有的键值,也就是那些英文
        const enkey = zidian[key]

        // console.log(138, enkey) // 此时 enkey 就是所有的英文了
        const value = objuser[enkey]

        // console.log(140, value)

        if (enkey === 'timeOfEntry' || enkey === 'correctionTime') {
          // 时间处理
          // arruser.push(value)    没有过滤器处理前

          // 过滤器处理后
          arruser.push(formatDate(value))

          // console.log(value)
        } else if (enkey === 'formOfEmployment') {
          // 聘用形式
          const obj = Enumeration.hireType.find(item => item.id === value)
          // console.log(157, obj)

          // 最后push的时候,加一个三元表达式
          arruser.push(obj ? obj.value : '未知')
        } else {
          // 上面的全部不满足才push进去
          arruser.push(value)
        }
      }
      return arruser
    }
  }

}
</script>
<style lang="scss" scoped>
.clx{
  height: 120px;
  width: 180px;
  object-fit: contain;
}
</style>
